<template>
  <div>
    <div class="btn-group">
      <el-button plain size="mini" style="margin: 20px" type="primary" @click="add">添加</el-button>
    </div>
    <div class="from">
      <el-table v-loading="loading" :data="list" border style="width: 100%">
        <el-table-column align="center" label="id" width="60">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="内容" width="180">
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column>
        <el-table-column label="文件路径" width="200">
          <template slot-scope="scope">
            {{ scope.row.file_path }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片" width="180">
          <template slot-scope="scope">
            <el-image :preview-src-list="srcList" :src="scope.row.image" style="width: 100px; height: 100px">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column :label-width="formLabelWidth" label="排序">
          <template slot-scope="scope">
            <el-button plain size="mini" style="margin-right: 10px" type="primary" @click="showChange(scope.row)">修改
            </el-button>
            <el-popconfirm :onConfirm="confirmDelete" cancel-button-text='取消' confirm-button-text='确定' icon="el-icon-info" icon-color="red" title="这是一段内容确定删除吗？">
              <el-button slot="reference" plain size="mini" type="danger" @click="deleteChange(scope.row.id)">删除
              </el-button>
            </el-popconfirm>
            <!--            <el-button plain size="mini" type="danger" @click="deleteChange(scope.row.id)">删除</el-button>-->
          </template>

        </el-table-column>
      </el-table>
    </div>
    <!--    添加-->
    <el-dialog :visible.sync="dialogFormVisible" title="添加数据">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="名称">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="图片">
          <el-input v-model="form.image" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="内容">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="文件">
          <!--          <el-input v-model="form.sort" autocomplete="off"></el-input>-->
          <File></File>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="分类id">
          <el-input v-model="form.cate_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="排序">
          <el-input v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAadd(form)">确 定</el-button>
      </div>
    </el-dialog>
    <!--    修改-->
    <el-dialog :visible.sync="dialogFormVisibleChange" title="修改数据">
      <el-form :model="getform">
        <el-form-item :label-width="formLabelWidth" label="名称">
          <el-input v-model="getform.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="图片">
          <el-input v-model="getform.image" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="内容">
          <el-input v-model="getform.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="文件">
          <!--          <el-input v-model="form.sort" autocomplete="off"></el-input>-->
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="分类id">
          <el-input v-model="getform.cate_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="排序">
          <el-input v-model="getform.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmChange(getform)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { c, g, s, z } from '@/api/sucai'
import { Message } from "element-ui";

export default {
  name: "Index",
  data () {
    return {
      list: null,

      formLabelWidth: '120px',
      dialogFormVisible: false,
      dialogFormVisibleChange: false,
      srcList: [],
      form: {
        title: null,
        image: null,
        content: null,
        file: null,
        cate_id: null,
        sort: null
      },
      getform: [],
      loading: true
    }
  },
  methods: {
    // 获取
    async fetchData () {
      await c ().then (( response ) => {
        const {data} = response.data
        this.list = data
        this.loading = false
        for (let i = 0; i < data.length; i++) {
          this.srcList.push (data[i].image)
        }
      })
    },

    // 显示添加框
    add () {
      this.dialogFormVisible = true
    },
    async confirmAadd ( getform ) {
      await z (getform).then (( response ) => {
        console.log (response)
      })
    },
    //   显示修改框
    showChange ( from ) {
      console.log (from)
      this.getform = from
      this.dialogFormVisibleChange = true
    },
    //  确认修改
    async confirmChange ( form ) {
      await g (form).then (( response ) => {
        console.log (response)
        if (response.code == 200) {
          this.loading = true
          setTimeout (() => {
            this.loading = false
            Message.success ({
              message: "修改成功"
            })
          }, 500)
        }
      })
    },
    //  删除
    async deleteChange ( id ) {
      await s (id).then (( response ) => {
        console.log (response)
      })
    },
    //  确认删除
    confirmDelete ( e ) {
      console.log (e)
    }
  },
  created () {
    this.fetchData ()
  }

}
</script>

<style scoped>

</style>
